<template>
  <div class="container">
    <div class="sceneView">
      <Scene></Scene>
    </div>
    <div class="jingdianfenbu">
      <jingdian-fenbu></jingdian-fenbu>
    </div>
    <div class="numfenbu">
      <jingdian-shuliang></jingdian-shuliang>
    </div>
    <div class="query">
      <query-scene></query-scene>
    </div>
    <div class="path">
      <path-scene></path-scene>
    </div>
    <div class="search">
      <search></search>
    </div>
    <div class="change">
      <change></change>
    </div>
  </div>
</template>

<script>
// import TiandituChange from './right/TiandituChange.vue'
import Map from './map/Map.vue'
import JingdianFenbu from './left/JingdianFenbu.vue'
import JingdianShuliang from './left/jingdianShuliang.vue'
import Query from './right/Query.vue'
import ThemeMap from './left/ThemeMap.vue'
import Search from './right/Search.vue'
import Scene from './scene/Scene.vue'
import Change from './left/Change.vue'
import QueryScene from './right/QueryScene.vue'
import PathScene from './right/PathScene.vue'
export default {
  components: { Map, JingdianFenbu, JingdianShuliang, Query, ThemeMap, Search, Scene, Change, QueryScene, PathScene },
  name: 'Home'
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  z-index: 99999;
  // align-items: center; /* 垂直居中 */
  // justify-content: center; /* 水平居中 */
  min-width: 1080 !important;
  max-width: 1920 !important;
  margin: 0 auto;
  padding: 1.1rem 0.25rem 0;
  background: url(../assets/images/bg_2.png) no-repeat 0 0 / contain;
  min-height: 1106px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.sceneView {
  // z-index: -99;
  position: absolute;
  /* 在这里设置所需的宽度和高度 */
  width: 1984px;
  height: 1028px;
  top: 85px;
  left: 32px;
  clip-path: polygon(30px 0px, 1950px 0px, 1976px 18px, 1976px 1008px, 1947px 1025px, 29px 1025px, 0px 1007px, 0px 17px);
}
.octagon {
  width: 150px;
  height: 0;
  padding-bottom: 150px;
  position: relative;
  background-color: #ff0000;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 106.066px;
    height: 106.066px;
    background-color: inherit;
  }

  &::before {
    top: -3.536px;
    left: 21.467px;
    transform: rotate(-45deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  &::after {
    bottom: -3.536px;
    left: 21.467px;
    transform: rotate(45deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.tdt {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 950px;
  left: 1530px;
}
.jingdianfenbu {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 160px;
  left: 50px;
}
.numfenbu {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 540px;
  left: 50px;
}
.query {
  z-index: 9;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.05);
  width: 280px;
  height: 80px;
  top: 720px;
  left: 1530px;
}
.theme {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 1000px;
  left: 50px;
}
.path {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 550px;
  left: 1530px;
}
.search {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 140px;
  left: 1530px;
}
.change {
  z-index: 9;
  position: absolute;
  width: 280px;
  height: 40px;
  top: 88px;
  left: 46px;
}
</style>
